<template>
  <div class="container">
    <span class="text-left" v-text="textLeft" style="width: 20vw"></span>
    <div class="expand"></div>
    <textarea class="edit-right" v-model="inputText" :style="areaStyle" :placeholder="textHint"></textarea>
  </div>
</template>

<script type="text/ecmascript-6">
  const EDIT_WIDTH = '75VW';
  const EDIT_HEIGHT = '22VW';

  export default {
    name: 'cell-text-area',

    data() {
      return {
        inputText: this.textDefault,
        areaStyle: {
          width: this.editRightWidth,
          height: this.editRightHeight
        }
      };
    },
    props: {
      textLeft: {
        type: String,
        required: true,
        default: 'text-left-required!!!'
      },
      textDefault: {
        type: String,
        default: null
      },
      textHint: {
        type: String,
        default: null
      },
      editRightWidth:
        {
          type: String,
          default:
          EDIT_WIDTH
        },
      editRightHeight:
        {
          type: String,
          default:
          EDIT_HEIGHT
        }
    },
    watch: {
      inputText() {
        this.$emit('getText', this.inputText);
      }
    }
  }
  ;
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .container
    display flex
    justify-content flex-start
    align-items flex-start
    background white
    width 100vw

  .text-left
    margin cell-margin 0 cell-margin cell-margin
    word-main()

  .expand
    flex 1

  .edit-right
    text-align right
    line-height 1.5
    margin cell-margin cell-margin cell-margin 0
    word-main()

  ::-webkit-input-placeholder
    word-vw(12px, third-ash)

  :-moz-placeholder
    word-vw(12px, third-ash)

  ::-moz-placeholder
    word-vw(12px, third-ash)

  :-ms-input-placeholder
    word-vw(12px, third-ash)
</style>
